<template>
  <rt-view>
    <rt-header>
      <rt-navbar :on-back="back">
        <span style="color: #003f5f;">详情</span>
        <div slot="right" @click="shareMe" class="more-class">
          ···
        </div>
      </rt-navbar>
    </rt-header>
    <rt-content>
      <div class="main-conetnt">
        <div class="top-content">
          <img :src="img" @click="show()" @error="showErrorPic($event)" />
        </div>
        <div class="middle-conetnt">
          <div class="activity-content">
            <div class="title-content">
              {{ articleForm.name }}
            </div>
            <div class="class-tag">
              <span>{{ articleForm.bbs_article_typeidname }}</span>
            </div>
            <div class="message">
              <img src="../../assets/icons/svgs/look.svg" />{{
                countForm.openCount
              }}&nbsp;&nbsp; <img src="../../assets/icons/svgs/comment.svg" />{{
                countForm.commentCount
              }}
            </div>
            <div class="content" v-html="articleForm.content"></div>
            <div class="comment">
              {{ countForm.commentCount }} 条评论
            </div>
            <div>
              <div v-for="(comment, index) in commentList" :key="index">
                <div class="comment-list">
                  <div class="img">
                    <avatar
                      :username="comment.nickName"
                      :size="40"
                      background-color="#B4BDCF"
                      color="#fff"
                    ></avatar>
                  </div>
                  <div class="title">
                    <div class="detail">
                      {{ comment.nickName }}
                      <span>{{
                        comment.createdon
                          | moment('YYYY/MM/DD HH:mm:ss')
                          | getTime
                      }}</span>
                      <b v-if="viableDelete(comment)"
                        ><rt-button
                          text
                          @click="deleteComment(comment.commentId)"
                          ><rt-icon name="rt-base-delete"></rt-icon></rt-button
                      ></b>
                    </div>
                    <div class="c-content" @click="reply(comment)">
                      {{ comment.text }}
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    v-for="(c, index) in comment.comments"
                    :key="index"
                    class="c-comment-list"
                  >
                    <div class="img">
                      <avatar
                        :username="c.nickName"
                        :size="25"
                        background-color="#B4BDCF"
                        color="#fff"
                      ></avatar>
                    </div>
                    <div class="title">
                      <div class="detail">
                        {{ c.nickName }}
                        <span>{{
                          c.createdon | moment('YYYY/MM/DD HH:mm:ss') | getTime
                        }}</span>
                        <b v-if="viableDelete(c)"
                          ><rt-button text @click="deleteComment(c.commentId)"
                            ><rt-icon
                              name="rt-base-delete"
                            ></rt-icon></rt-button
                        ></b>
                      </div>
                      <div class="c-content">
                        <span
                          v-if="c.replyName != null"
                          @click="reply(comment, c)"
                          >回复<span>@{{ c.replyName }}</span
                          >：{{ c.text }}</span
                        >
                        <span
                          v-if="c.replyName == null"
                          @click="reply(comment, c)"
                          >{{ c.text }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="noContent">
              ————没有更多了————
            </div>
          </div>
        </div>
      </div>
      <div v-transfer-dom>
        <rt-popup v-model="show2" position="bottom">
          <div class="share-open">
            <div class="share-weixin" @click="share('wx')">
              <div class="img-svg">
                <img src="../../assets/imgs/weixin.png" />
              </div>
              微信
            </div>
            <div class="share-friend" @click="share('wx_circle')">
              <div class="img-svg">
                <img src="../../assets/imgs/friend.png" />
              </div>
              朋友圈
            </div>
          </div>
        </rt-popup>
      </div>
      <rt-confirm v-model="deleteConfirm" title="恭喜你" show-input />
    </rt-content>
    <rt-footer class="footer">
      <div class="footer-comment" @click="goComment()"><img
          src="../../assets/icons/svgs/record.svg"
        />&nbsp;&nbsp;说点什么吧~</div>
      <div class="footer-like">
        <img
          v-if="countForm.favoriteStatus == '0'"
          src="../../assets/icons/svgs/favorite.svg"
          width="20px"
          @click="favorite()"
        /><img
          v-if="countForm.favoriteStatus == '1'"
          src="../../assets/icons/svgs/disfavorite.svg"
          width="20px"
          @click="favorite()"
        />{{ countForm.favoriteCount }}
        <img
          v-if="countForm.postLikeStatus == '0'"
          src="../../assets/icons/svgs/like-line.svg"
          height="20px"
          @click="like()"
        /><img
          v-if="countForm.postLikeStatus == '1'"
          src="../../assets/icons/svgs/dislike-line.svg"
          height="20px"
          @click="like()"
        />{{ countForm.postLikeCount }}
      </div>
    </rt-footer>
  </rt-view>
</template>

<script>
import Avatar from 'vue-avatar';
export default {
  name: 'CampaignDetail',
  components: {
    Avatar,
  },
  filters: {
    getTime(value) {
      var date1 = new Date(value);
      var date2 = new Date();
      var time1 = date1.getTime();
      var time2 = date2.getTime();
      var time = (time2 - time1) / 1000;
      var min = time / 60;
      if (min < 1) {
        return '刚刚';
      }
      if (min < 60) {
        return Math.floor(min) + '分钟前';
      }
      var hours = min / 60;
      if (hours < 24) {
        return Math.floor(hours) + '小时前';
      }
      var day = hours / 24;
      if (day < 30) {
        return Math.floor(day) + '天前';
      }
      var month = day / 30;
      if (month < 12) {
        return Math.floor(month) + '月前';
      }
      var year = month / 12;
      return Math.floor(year) + '年前';
    },
  },
  data() {
    return {
      showIcon: false, // 用来排除第一次进入后要显示不需要显示的东西
      show2: false,
      deleteConfirm: false,
      actionShow: false,
      isLike: true,
      id: '',
      showAlert: false,
      articleForm: {
        avatar: '',
        bbs_article_typeidname: '',
        bbs_articleid: '',
        name: '',
      },
      countForm: {
        commentCount: 0,
        favoriteCount: 0,
        openCount: 0,
        postLikeCount: 0,
      },
      commentList: [],
      commentForm: {
        comment_by_name: '',
      },
      img: '',
      imgs: [],
    };
  },
  mounted() {
    this.$bus.$on('reload-commentDatas', () => {
      this.getArticleComments();
      this.getArticleStatistics();
      this.commentForm.replyId = null;
      this.commentForm.replyName = null;
      this.commentForm.commentId = null;
    });
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    if (this.id != null && this.id !== '') {
      var param = {
        object_id: this.id,
        object_name: this.name,
      };
      rt.post(
        `/api/bbs/openedlog/saveopenlog/article`,
        param
      ).then((res) => {});
      this.getArticleById();
      this.getArticleStatistics();
      this.getArticleComments();
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    tenantCode() {
      return this.$store.state.auth.tenantCode;
    },
  },
  methods: {
    back() {
      this.$router.back();
    },
    viableDelete(val) {
      if (
        val.commentByCode === this.user.userCode &&
        val.accountCode === this.tenantCode
      ) {
        return true;
      }
      return false;
    },
    getArticleById() {
      rt.get(`api/bbs/article/detail/${this.id}`).then((res) => {
        this.img = rt.showRemotePic(res.avatar);
        this.imgs.push(this.img);
        //   this.form = res;
        this.articleForm = res;
      });
    },
    getArticleStatistics() {
      rt.get(`api/bbs/article/getstatistics/${this.id}`).then((res) => {
        this.countForm = res;
      });
    },
    getArticleComments() {
      rt.get(`api/bbs/postcommentlog/listcomment/${this.id}`).then((res) => {
        this.commentList = res;
      });
    },
    deleteComment(id) {
      rt.confirm('确定要删除该条评论么？')
        .then(() => {
          rt.post(`api/bbs/postcommentlog/singledelete/${id}`)
            .then((res) => {
              this.getArticleComments();
              this.getArticleStatistics();
              rt.showSuccessToast('删除成功');
            })
            .catch((error) => {
              rt.showErrorToast(error);
            });
        })
        .catch(() => {
          rt.showSuccessToast('取消成功');
        });
    },
    show() {
      let params = {
        urls: this.imgs,
        current: this.imgs[0],
      };
      let options = {
        share: this.share,
        download: this.download,
      };
      rt.previewImage(params, options);
    },
    showErrorPic(e) {
      e.target.src = require('@/assets/imgs/no-pictures.svg');
      e.target.onerror = null; //防止闪图
    },
    // 分享回调
    share(url) {
      console.log('share', url);
    },
    // 下载回调
    download(url) {
      console.log('download', url);
    },
    reply(comment, c) {
      this.commentForm = comment;
      if (c) {
        this.commentForm.replyId = c.commentById;
        this.commentForm.replyName = c.nickName;
      } else {
        this.commentForm.replyId = null;
        this.commentForm.replyName = null;
      }
      this.$router.push({
        name: 'article-comment',
        query: {
          parent_id: this.commentForm.commentId,
          object_id: this.id,
          object_name: this.articleForm.name,
          reply_comment_by_id: this.commentForm.replyId,
          reply_comment_by_name: this.commentForm.replyName,
          name: this.commentForm.nickName,
        },
      });
    },
    goComment() {
      this.$router.push({
        name: 'article-comment',
        query: {
          object_id: this.id,
          object_name: this.articleForm.name,
          name: this.name,
        },
      });
    },
    favorite() {
      var param = {
        object_id: this.id,
        object_name: this.articleForm.name,
      };
      rt.post(`/api/bbs/myfavoritelog/saveorcancelfavorite`, param).then(
        (res) => {
          this.getArticleStatistics();
          if (this.countForm.favoriteStatus == '0') {
            // 没有收藏
            rt.showSuccessToast('收藏已取消');
          } else if (this.countForm.favoriteStatus == '1') {
            // 收藏了的
            rt.showSuccessToast('收藏成功');
          }
        }
      );
    },
    like() {
      var param = {
        object_id: this.id,
        object_name: this.articleForm.name,
      };
      rt.post(`/api/bbs/postlikelog/postlike`, param).then((res) => {
        this.getArticleStatistics();
      });
    },
    //分享
    shareMe() {
      this.show2 = true;
    },
    share(type) {
      var url = window.location.href;
      url = url.replace('article-detail', 'share-article');
      var name = this.articleForm.name;
      var remark = '查看文章详情';
      var imgUrl = this.img;
      const data = {
        object_id: this.articleForm.bbs_articleid,
        object_name: this.articleForm.name,
        share_scene: type === 'wx' ? '1' : '2',
      };
      rt.post(`/api/bbs/sharedlog/savesharelog/article`, data)
        .then((res) => {})
        .catch((error) => {
          console.log(error);
        });
      rt.shareData(url, name, remark, imgUrl, type);
      this.show2 = false;
    },
  },
};
</script>
<style lang="less" scoped>
@deepselecter: ~'>>>';
.main-conetnt {
  .top-content {
    z-index: -1;
    padding: 0;
    img {
      z-index: 1;
    }
  }
  .content {
    color: #555555;
    margin: 10px 5px 0px 5px;
    line-height: 1.7em;
    p {
      text-indent: 27pt;
    }
  }
  .comment {
    margin-top: 12px;
    margin-bottom: 8px;
    border-bottom: 1px #e8e8e8 solid;
    padding-bottom: 15px;
    color: #222222;
    /*font-family: Microsoft YaHei;*/
    font-weight: bold;
  }
  .comment-list {
    clear: both;
    margin-top: 5px;
    padding-top: 10px;
    .img {
      width: 50px;
      height: 50px;
      float: left;
    }
    .title {
      letter-spacing: 0;
      margin-left: 50px;
      height: 100%;
      .detail {
        height: 30px;
        padding-top: 3px;
        color: #555555;
        span {
          font-size: 11px;
          color: #888888;
        }
        b {
          float: right;
          margin-right: 1%;
        }
      }
      .c-content {
        border-bottom: 0.5pt #f0f0f0 solid;
        padding-bottom: 10px;
        color: #222222;
        margin-top: 2px;
        line-height: 20pt;
        padding-right: 21px;
      }
    }
  }
  .c-comment-list {
    margin-top: 5px;
    margin-left: 10%;
    .img {
      margin-left: 12px;
      margin-top: 5px;
      clear: both;
      float: left;
    }
    .title {
      margin-left: 50px;
      height: 100%;
      .detail {
        height: 30px;
        padding-top: 3px;
        color: #555555;
        span {
          font-size: 14px;
          color: #888888;
        }
        b {
          float: right;
          margin-right: 1%;
        }
      }
      .c-content {
        border-bottom: 0.5pt #f0f0f0 solid;
        padding-bottom: 10px;
        color: #222222;
        margin-top: -4px;
        line-height: 24pt;
        padding-right: 20px;
        span span {
          font-family: normal;
          color: #53a4fc;
        }
      }
    }
  }
  .noContent {
    margin: 10px auto;
    text-align: center;
    color: #cccccc;
    display: none;
  }
  .middle-conetnt {
    z-index: 1;
    position: relative;
    margin-top: -20px;
    padding: 15px 15px 15px 15px;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    .activity-content {
      .title-content {
        font-weight: bold;
        padding-bottom: 10px;
      }
      .name-content {
        padding: 10px 0;
        .name-sty {
          color: blue;
          display: inline-block;
        }
        .show-sty {
          display: inline-block;
        }
      }
      .time-content {
        padding: 10px 0;
        .img-svg {
          width: 23px;
          height: 23px;
          float: left;
          margin-right: 5px;
        }
      }
      .sub-title {
        font-weight: bolder;
        padding: 20px 0;
      }
    }
  }
  .buttom-content {
    margin-bottom: 20px;
    padding-bottom: 30px;
  }
  .buttom-button {
    position: absolute;
    text-align: center;
    bottom: 0;
    margin: 10px 0;
    width: 92%;
    height: 45px;
    line-height: 45px;
    border-radius: 5px;
    left: 50%;
    padding-top: 100px;
    transform: translateX(-50%);
  }

  & @{deepselecter} .rt-btn {
    margin-right: 13px;
  }
}
</style>
<style lang="less" scoped>
/deep/ .input-area.is-top .input-label {
  padding-top: 7px;
}
/deep/ .rt-readonly .rt-text-readonly {
  text-align: left;
  color: #888;
  font-weight: 400;
}
/deep/ .input-area.is-top .input-wrapper {
  padding: 5px 0 5px 0;
}
.footer {
  background: #ffffff;
  display: flex;
  align-items: center;
  .footer-comment {
    letter-spacing: 1px;
    flex: 1;
    margin: 6px 5px 6px 10px;
    height: 32px;
    line-height: 32px;
    background: rgba(180, 189, 207, 0.15);
    color: #888888;
    border-radius: 16px;
    font-weight:400;
    padding-left: 15px;
    font-family: 'PingFangSC-Regular','PingFang SC';
    font-size: 13px;
    img {
      width: 14px;
    }
  }
  .footer-like {
    text-align: center;
    color: #2b2b2b;
    padding-right: 10px;
    img {
      display: inline-block;
      width: 20px;
      padding-left: 5px;
      padding-right: 5px;
    }
  }
  .footer-dislike {
    color: #888888;
  }
  .footer-liked {
    color: #53a4fc;
  }
  rt-icon {
    color: red;
    background: red;
  }
}
.rt-btn-icon {
  /deep/ .rt-button-icon > svg use {
    fill: #53a4fc !important;
  }
}
.main-conetnt {
  background: #ffffff;
}
.class-tag span {
  font-size: 12px;
  padding: 1px 10px 1px 10px;
  margin-bottom: 10px;
  display: inline-block;
  background: #e6f1fd;
  color: #53a4fc;
  border-radius: 5px;
  margin-bottom: 10px;
}
.message {
  color: #888888;
  padding-bottom: 10px;
  border-bottom: 1px #f0f0f0 solid;
  img {
    height: 12px;
    display: inline-block;
    width: 18px;
    padding-right: 5px;
  }
}
.share-open {
  height: 60px;
  padding: 20px 50px;
  display: flex;
  .share-weixin {
    float: left;
    margin-left: 20%;
    width: 50%;
    img {
      margin-left: 3px;
    }
  }
  .share-friend {
    width: 50%;
    img {
      margin-left: 10px;
    }
  }
  .img-svg {
    width: 25px;
    height: 25px;
  }
}
.more-class {
  letter-spacing: 3px;
  color: #000000;
  font-weight: bold;
}
</style>
